<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const barChartRef = ref(null)

function draw() {
  let myChart = echarts.init(barChartRef.value)

  let option = {
    title: {
      text: '年龄分布',
      textStyle: {
        fontWeight: 'normal',
      },
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      data: ['0-14岁', '15-19岁', '20-24岁', '25-29岁', '30-34岁', '35-39岁', '25-29岁', '30-34岁'],
      axisLabel: {
        fontSize: 8,
      },
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [500, 200, 280, 400, 100, 200, 550, 220],
        barWidth: 10,
        itemStyle: {
          color: '#6164FF',
        },
      },
    ],
  }

  myChart.setOption(option)
}

onMounted(() => {
  draw()
})
</script>

<template>
  <div ref="barChartRef" class="bar-chart"></div>
</template>

<style scoped>
.bar-chart {
  min-width: 460px;
  width: 36.5%;
  height: 220px;
  background: var(--vt-c-white);
  margin: 0 10px 10px 0;
  padding: 10px;
}
</style>
